<template>
	<view class="content"> 
		<view class="main">
			<navgatsVue :navigationMsg="navigationMsg" style="z-index: 2;"></navgatsVue>
			<view class="postion_dw">
				
			</view>
			<view class="kfs_top" @click="indexs">
				<view class="kfs_top_zuo">
					<p style="font-size: 40rpx;margin-top: 80rpx;margin-left: 30rpx;">Hi~ 您好</p>
					<p style="font-size: 40rpx;margin-left: 30rpx;">请选择举报的类型</p>
				</view>
				<view class="kfs_top_you">
					<image src="/static/举报中心.png" mode="" style="width: 80%;height: 100%;"></image>
				</view>
			</view>
			<view class="kfs_dhs">
				<view class="dp_curd">
					<view class="dp_curd_zuo">
						<image src="/static/店铺.png" mode="" style="width: 50rpx;height: 50rpx;margin-top: 25rpx;"></image>
						<p>店铺违规</p>
					</view>
					<view class="dp_curd_you">
						<image src="/static/前进.png" style="width: 50rpx;height: 50rpx;margin-top: 30rpx;" mode=""></image>
					</view>
				</view>
				<view class="dp_curd_btm">
					<p>商家信息发布不规范、描述不符、售假、欺诈等。</p>
				</view>
			</view>
			<view class="kfs_dhs">
				<view class="dp_curd">
					<view class="dp_curd_zuo">
						<image src="/static/贷款警告.png" mode="" style="width: 50rpx;height: 50rpx;margin-top: 25rpx;"></image>
						<p>贷款中介</p>
					</view>
					<view class="dp_curd_you">
						<image src="/static/前进.png" style="width: 50rpx;height: 50rpx;margin-top: 30rpx;" mode=""></image>
					</view>
				</view>
				<view class="dp_curd_btm">
					<p>受到贷款中介蒙骗、遭到手机租赁“套路贷”诈骗等。</p>
				</view>
			</view>
			<view class="kfs_dhes">
				<view class="dp_curd">
					<view class="dp_curd_zuo">
						<image src="/static/文件威胁.png" mode="" style="width: 50rpx;height: 50rpx;margin-top: 25rpx;"></image>
						<p>其他举报</p>
					</view>
					<view class="dp_curd_you">
						<image src="/static/前进.png" style="width: 50rpx;height: 50rpx;margin-top: 30rpx;" mode=""></image>
					</view>
				</view>
				<view class="dp_curd_btm">
					<p>信息泄露/违规催收/过渡收集消费者个人信息/恐吓辱
骂/商家租赁违禁商品/商家引导私下交易/邮寄恶心物
品/假冒伪劣/虚假租赁/虚假发货/商家拒绝发货/商家
名称、头像违规滥发信息/商家拒绝提供发票/破坏晴
朗坏境。</p>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navgatsVue from '../../../common/navgats/navgats.vue';
	export default {
		data() {
			return {
				navigationMsg:{
					title:"举报中心",
					
				}
			}
		},
		components:{
			navgatsVue
		},
		methods: {
			
		}
	}
</script>

<style>
	*{
		font-size: 3vw;
	}
.content{
		width: 100vw;
		height: 100vh;
		/* position: absolute; */
		background-color: #F6F6F6;
		overflow-y: auto;
	}
	.main{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.postion_dw{
		width: 100vw;
		height: 50vh;
		position: absolute;
		top: 0;
		background: linear-gradient(to bottom, #FC807D,#FFC3BE, #F9F9F9);
		z-index: 0;
	}
	.kfs_top{
		width: 90%;
		height: 200rpx;
		z-index: 2;
		display: flex;
	}
	.kfs_top_zuo{
		width: 60%;
		height: 100%;
	}
	.kfs_top_you{
		width: 40%;
		height: 100%;
	}
	.kfs_dhs{
		width: 90%;
		height: 200rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		display: flex;
		z-index: 2;
		flex-direction: column;
		align-items: center;
	}
	.kfs_dhes{
		width: 90%;
		height: 430rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		display: flex;
		z-index: 2;
		flex-direction: column;
		align-items: center;
	}
	.dp_curd{
		width: 90%;
		height: 100rpx;
		display: flex;
	}
	.dp_curd_zuo{
		width: 80%;
		height: 100%;
		display: flex;
	}
	.dp_curd_zuo p{
		font-size: 40rpx;
		line-height: 100rpx;
		margin-left: 20rpx;
		font-weight: bold;
		
	}
	.dp_curd_you{
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: flex-end;
	}
	.dp_curd_btm{
		width: 90%;
		/* height: 70rpx; */
		background-color: #F6F6F6;
		border-radius: 20rpx;
		
	}
	.dp_curd_btm p{
		font-size: 3vw;
		line-height: 70rpx;
		/* margin-left: 20rpx; */
		color: #716B7F;
		text-align: center;
		/* white-space:nowrap; */
	}
</style>
